<template>
  <div class="center-container">
    <div class="form-main">
      <el-form ref="formRef" :model="localFieldInfo" :rules="rules" label-width="80px">
        <div v-for="field in props.fields" :key="field.prop">
          <el-form-item :label="field.label" :prop="field.prop">
            <!-- 文本框部分 -->
            <template v-if="field.type === 'input'">
              <el-input
                v-model="localFieldInfo[field.prop]"
                :placeholder="field.placeholder"
                :readonly="field.readonly"
                :disabled="field.disabled"
                :show-password="field.isPassword"
                :style="{ width: field.width || '90%' }"
              />
              <!-- 输入框后的按钮 -->
              <slot :name="'append-' + field.prop" v-if="field.showAppendSlot"></slot>
            </template>
            <!-- 下拉框部分 -->
            <template v-else-if="field.type === 'select'">
              <el-select v-model="localFieldInfo[field.prop]" :placeholder="field.placeholder" :readonly="field.readonly" :disabled="field.disabled" :style="{ width: field.width || '70%' }">
                <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </template>
            <!-- 复选框部分 -->
            <template v-else-if="field.type === 'checkbox'">
              <el-checkbox-group v-model="localFieldInfo[field.prop]">
                <el-checkbox v-for="checkbox in field.checkboxes" :key="checkbox.label" :label="checkbox.label" />
              </el-checkbox-group>
            </template>
            <!-- 单选框部分 -->
            <template v-else-if="field.type === 'radio'">
              <el-radio-group v-model="localFieldInfo[field.prop]">
                <el-radio v-for="radio in field.radios" :key="radio.label" :label="radio.label" />
              </el-radio-group>
            </template>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="form-footer">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button type="primary" @click="closeDialog">返回</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter.js'
/* defineProps 父传子 */
const props = defineProps({
  // 表单内容
  fields: {
    type: Array,
    default: () => [
      { type: 'input', prop: 'userName', label: '用户名' },
      { type: 'input', prop: 'nickName', label: '昵称' },
      {
        type: 'radio',
        prop: 'gender',
        label: '性别',
        radios: [{ label: '男' }, { label: '女' }]
      },
      { type: 'input', prop: 'phone', label: '手机号' }
    ]
  },
  // 父组件传的默认值
  fieldInfo: {
    type: Object,
    default: () => ({ userName: '5105', nickName: '123', gender: '', phone: '123' })
  },
  // 自定义规则
  rules: {
    type: Object,
    default: () => ({
      idCard: [{ required: true, message: '需要填写该项', trigger: 'blur' }],
      personName: [{ required: true, message: '需要填写该项', trigger: 'blur' }],
      typeName: [{ required: true, message: '需要填写该项', trigger: 'blur' }]
    })
  }
})
/* 本界面 */
const localFieldInfo = ref({ ...props.fieldInfo }) // 包装fieldInfo使其成为响应式对象
const formRef = ref(null) // 表单ref响应式对象

const counterStore = useCounterStore() // 从stores中创建实例
// 提交表单数据
const submitForm = async () => {
  try {
    // 使用封装的方法进行表单验证
    await counterStore.validateForm(formRef.value)
    console.log('表单验证通过')
    // 构建提交的表单数据对象，只包含当前选项卡相关的字段
    return localFieldInfo.value
  } catch (error) {
    // 处理表单验证失败的逻辑
    // console.error(error.message)
    return false
  }
}
// 初始化表单
const resetFieldInfo = () => {
  formRef.value.resetFields() // 将表单恢复成初始状态
}

/* defineExpose 子传父的方法 */
// 开启/关闭弹窗

defineExpose({
  submitForm,

  resetFieldInfo
})
</script>

<style scoped>
.center-container {
  display: flex;
  flex-direction: column; /* 竖直方向排列子元素 */
  justify-content: center;
  align-items: center;
  height: 50vh; /* 让容器占据整个视口的高度 */
}
.form-main {
  margin-right: 200px;
  padding: 20px;
}
.form-footer {
  margin-top: 20px; /* 设置按钮与表单之间的间距 */
  margin-right: 620px;
  align-self: flex-end;
}
/* 让按钮容器在交叉轴上靠底部对*/
</style>
